<template>
    <div class="cms-news">
        <div class="cms-news-content">
            <div class="news-title">新闻</div>
            <hr/>

            <div class="news-left">
                <div class="news-left-title" @click="queryByType(1)">企业新闻 ></div>
                <div class="news-left-title" @click="queryByType(2)">行业新闻 ></div>
                <div class="news-left-title" @click="queryByType(3)">其他新闻 ></div>
            </div>

            <div class="news-right">
                <div class="item-title" v-for="item in newsItem">
                    <div class="item-title-start" @click="toContent(item)">{{item.newsTitle}}</div>
                    <div class="item-title-end">发布时间:  {{item.createDate}}</div>
                </div>
            </div>



        </div>

    </div>
</template>

<script>
    import newsApi from '@/api/newsApi'
    export default {
        name: "CmsNotice",
        data(){
            return{
                newsItem:[]
            }
        },
        methods:{
            toContent(item){
                let content={
                    type:"news",
                    id:item.id
                }
                let routeData = this.$router.resolve({ path: '/content', query: content });
                window.open(routeData.href, '_blank');
            },
            async queryByType(type){
                let res = await newsApi.newsDetail(type,"");
                if (res.code == '200'){
                    this.newsItem=res.data
                }
            }
        },
        created:async function(){
            let res = await newsApi.newsDetail("","");
            if (res.code == '200'){
                this.newsItem=res.data
            }
        }
    }
</script>

<style scoped>
    .cms-news{
        background-color: #FFFFFF;
        width: 100%;
        height: auto;
        float: left;
    }
    .cms-news-content{
        text-align: center;
        max-width:1540px;
        width: 100%;
        /*margin: 0 auto;*/
        margin-left: 10%;
        margin-bottom: 80px;
        float: left;
        height: auto;
    }
    .news-title{
        margin-top: 15px;
        font-size: 25px;
        margin-bottom: 10px;
        color: #ff7908;
        text-align: left;
    }
    .item-image > img {
        width: 100%;
        height: 100%;
    }
    .item-title{
        height: 70px;
        text-align: left;
        font-size: 20px;
        cursor: pointer;
        border-bottom: 1px #e6e6e6 solid;
    }

    .item-title:hover{
        color: #ff7908;
    }
    .item-title-start{
        margin-top: 20px;
        margin-left: 20px;
        float: left;
    }
    .item-title-end{
        margin-top: 20px;
        font-size: 16px;
        float: right;
    }
    .news-left{
        float: left;
        width: 20%;
    }
    .news-left-title{
        text-align: left;
        height: 50px;
        line-height: 50px;
        border-bottom: 1px #dad8d8 solid;
        width: 90%;
        cursor: pointer;
    }
    .news-left-title:hover{
        color: #ff7908;
    }
    .news-right{
        float: left;
        width: 80%;
    }
</style>